<template>
  <view class="write">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">
      </view>
      <view class="topitem">
        <view style="width: 20%;position: relative;">
          <image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;" @click="myinfo()">
          </image>
        </view>
        <view class="toptit">
          <view class="flex">
            <view class="text">
              更改名字
            </view>
            <!-- <image src="../../static/message/donotdisturb.png" mode="" class="lingdang"></image> -->
          </view>
        </view>
        <view class="right" :style="show!==''?'background-color: #FF2A31;':'background-color: #FFAAAD;'"
          @click="myinfo">
          完成
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 180rpx;">

    </view>
    <view class="radioall">
      <view class="u-page__radio-item">
        <u-radio-group v-model="show" :borderBottom="true" placement="column" iconPlacement="right" activeColor="#f00">
          <u-radio :customStyle="{marginBottom: '16px'}" v-for="(item, index) in radiolist7" :key="index"
            :label="item.name" :name="item.name">
          </u-radio>
        </u-radio-group>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: "",
        radiolist7: [{
            name: '男',
            disabled: false
          },
          {
            name: '女',
            disabled: false
          },
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        // radiovalue7: '可爱',
      }
    },

    methods: {
      myinfo() {
        uni.navigateTo({
          url: '../my/personalInformation',
        });
      },
    },
  }
</script>

<style lang="scss">
  // 头部
  .topbox {
    width: 100vw;
    background-color: white;
    position: fixed;
    z-index: 99;

    .top-top {
      width: 100%;
      height: var(--status-bar-height);
    }

    .topitem {
      border-bottom: solid 2rpx #E5E5E5;
      width: 100%;
      height: 110rpx;
      background-color: white;
      display: flex;
      padding: 20rpx 50rpx;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;

      .addfriend {
        position: absolute;
        top: 50rpx;
        left: 0;
        background-color: #505050;
        width: 240rpx;
        height: 220rpx;
        border-radius: 20rpx;

        .afone {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
          border-bottom: solid #F5F5F5 2rpx;
        }

        .aftwo {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
        }
      }

      .toptit {
        width: 60%;
        text-align: center;
        // margin: auto;

        .flex {
          margin-top: 10rpx;
          // border: 1px solid #505050;
          margin: auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;

          .text {
            font-size: 35rpx;
            margin-right: 10rpx;
            font-weight: 600;
          }

          .lingdang {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .huise {
          font-size: 23rpx;
          color: #999;
        }
      }

      .right {
        border: 1rpx solid;
        color: #fff;
        padding: 10rpx 20rpx;
        border-radius: 15rpx;
      }
    }
  }

  // 头部
  .text1 {
    // border: 1rpx solid;
    width: 90vw;
    margin: auto;
    // height: 90vh;
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid #ccc;
  }

  .huise {
    width: 90%;
    margin: auto;
    font-size: 28rpx;
    color: #ccc;
  }

  .radioall {
    width: 90vw;
    margin: auto;
  }
</style>